<template functional>
    <div
        :class="[
            props.m().isRepeat() ?
                'kiwi-messagelist-message--authorrepeat' :
                'kiwi-messagelist-message--authorfirst',
            'kiwi-messagelist-message-' + props.message.type,
            props.message.type_extra ?
                'kiwi-messagelist-message-' + props.message.type + '-' + props.message.type_extra :
                '',
            props.ml.isMessageHighlight(props.message) ?
                'kiwi-messagelist-message--highlight' :
                '',
            props.ml.isHoveringOverMessage(props.message) ?
                'kiwi-messagelist-message--hover' :
                '',
            props.ml.buffer.last_read && props.message.time > props.ml.buffer.last_read ?
                'kiwi-messagelist-message--unread' :
                '',
            props.message.nick.toLowerCase() === props.ml.ourNick.toLowerCase() ?
                'kiwi-messagelist-message--own' :
                '',
            props.ml.message_info_open === props.message ?
                'kiwi-messagelist-message--info-open' :
                '',
            props.ml.message_info_open && props.ml.message_info_open !== props.message ?
                'kiwi-messagelist-message--blur' :
                '',
            (props.message.user && props.m().userMode(props.message.user)) ?
                'kiwi-messagelist-message--user-mode-' + props.m().userMode(props.message.user) :
                '',
            data.staticClass,
        ]"
        :data-message-id="props.message.id"
        :data-nick="(props.message.nick||'').toLowerCase()"
        class="kiwi-messagelist-message kiwi-messagelist-message--modern"
        @click="props.ml.onMessageClick($event, props.message, true)"
        @dblclick="props.ml.onMessageDblClick($event, props.message)"
    >
        <div class="kiwi-messagelist-modern-left">
            <template v-if="props.m().displayAvatar(props.message)">
                <component
                    :is="injections.components.UserAvatar"
                    :data-nick="props.message.nick"
                    :user="props.message.user"
                    :network="props.m().getNetwork()"
                    :message="props.message"
                />
            </template>
        </div>
        <div class="kiwi-messagelist-modern-right">
            <div class="kiwi-messagelist-top">
                <a
                    v-if="props.message.nick"
                    :style="{ 'color': props.ml.userColour(props.message.user) }"
                    :class="[
                        'kiwi-messagelist-nick',
                        props.message.user && props.m().userMode(props.message.user) ?
                            'kiwi-messagelist-nick--mode-'+props.m().userMode(props.message.user) :
                            ''
                    ]"
                    :data-nick="(props.message.nick).toLowerCase()"
                    @mouseover="props.ml.hover_nick=props.message.nick.toLowerCase();"
                    @mouseout="props.ml.hover_nick='';"
                >
                    <span class="kiwi-messagelist-nick-prefix">{{
                        props.message.user ?
                            props.m().userModePrefix(props.message.user) :
                            ''
                    }}</span>{{ props.message.nick }}
                </a>
                <div
                    v-if="props.m().showRealName()"
                    class="kiwi-messagelist-realname"
                    @click="props.ml.openUserBox(props.message.nick)"
                    @mouseover="props.ml.hover_nick=props.message.nick.toLowerCase();"
                    @mouseout="props.ml.hover_nick='';"
                >
                    {{ props.message.user.realname }}
                </div>
                <div
                    v-if="props.m().isMessage(props.message) &&
                        props.ml.bufferSetting('show_timestamps')"
                    :title="props.ml.formatTimeFull(props.message.time)"
                    class="kiwi-messagelist-time"
                >
                    {{ props.ml.formatTime(props.message.time) }}
                </div>
            </div>
            <div
                v-if="props.message.bodyTemplate &&
                    props.message.bodyTemplate.$el &&
                    props.ml.isTemplateVue(props.message.bodyTemplate)"
                v-rawElement="props.message.bodyTemplate.$el"
                class="kiwi-messagelist-body"
            />
            <component
                :is="props.message.bodyTemplate"
                v-else-if="props.message.bodyTemplate"
                v-bind="props.message.bodyTemplateProps"
                :buffer="props.ml.buffer"
                :message="props.message"
                :idx="props.idx"
                :ml="props.ml"
                class="kiwi-messagelist-body"
            />
            <div
                v-else
                class="kiwi-messagelist-body"
                v-html="props.ml.formatMessage(props.message)"
            />

            <component
                :is="injections.components.MessageInfo"
                v-if="props.ml.message_info_open===props.message"
                :message="props.message"
                :buffer="props.ml.buffer"
                @close="props.ml.toggleMessageInfo()"
            />

            <div v-if="props.message.embed.payload && props.ml.shouldAutoEmbed">
                <component
                    :is="injections.components.MediaViewer"
                    :url="props.message.embed.payload"
                    :show-pin="true"
                    @close="props.message.embed.payload = ''"
                    @pin="props.ml.openEmbedInPreview(props.message)"
                />
            </div>
        </div>
    </div>
</template>

<script>
'kiwi public';

// eslint-plugin-vue's max-len rule reads the entire file, including the CSS. so we can't use this
// here as some of the rules cannot be broken up any smaller
/* eslint-disable max-len */

import { urlRegex } from '@/helpers/TextFormatting';
import MessageInfo from './MessageInfo';
import AwayStatusIndicator from './AwayStatusIndicator';
import UserAvatar from './UserAvatar';
import MediaViewer from './MediaViewer';

const methods = {
    props: {},
    showRealName() {
        let props = this.props;

        // Showing realname is not enabled
        if (!props.ml.buffer.setting('show_realnames')) {
            return false;
        }

        // Server does not support extended-join so realname would be inconsistent
        let client = props.ml.buffer.getNetwork().ircClient;
        if (!client.network.cap.isEnabled('extended-join')) {
            return false;
        }

        // We dont have a user or users realname
        if (!props.message.user || !props.message.user.realname) {
            return false;
        }

        // No point showing the realname if it's the same as the nick
        if (props.message.user.nick.toLowerCase() === props.message.user.realname.toLowerCase()) {
            return false;
        }

        // If the realname contains a URL it's most likely a clients website
        if (urlRegex.test(props.message.user.realname)) {
            return false;
        }

        return true;
    },
    getNetwork() {
        let props = this.props;
        return props.ml.buffer.getNetwork();
    },
    isRepeat() {
        let props = this.props;
        let ml = props.ml;
        let idx = props.idx;
        let message = props.message;
        let prevMessage = ml.filteredMessages[idx - 1];

        return !!prevMessage &&
            prevMessage.nick === message.nick &&
            message.time - prevMessage.time < 60000 &&
            prevMessage.type !== 'traffic' &&
            message.type !== 'traffic' &&
            message.type === prevMessage.type &&
            message.day_num === prevMessage.day_num;
    },
    isHoveringOverMessage(message) {
        let props = this.props;
        return message.nick && message.nick.toLowerCase() === props.ml.hover_nick.toLowerCase();
    },
    isMessage(message) {
        let types = ['privmsg', 'action', 'notice', 'message'];
        return types.indexOf(message.type) > -1;
    },
    displayAvatar(message) {
        let props = this.props;
        // if there is no user attached hide the avatar
        if (!message.user) {
            return false;
        }

        // if its not a message hide the avatar
        if (!this.isMessage(message)) {
            return false;
        }

        // dont show avatars in server or special buffers
        if (props.ml.buffer.isServer() || props.ml.buffer.isSpecial()) {
            return false;
        }

        // dont show avatar if its a repeat of the same user
        if (this.isRepeat()) {
            return false;
        }

        return true;
    },
    userMode(user) {
        let props = this.props;
        return props.ml.buffer.userMode(user);
    },
    userModePrefix(user) {
        let props = this.props;
        return props.ml.buffer.userModePrefix(user);
    },
};

export default {
    inject: {
        components: {
            default: {
                UserAvatar,
                MessageInfo,
                AwayStatusIndicator,
                MediaViewer,
            },
        },
    },
    props: {
        ml: Object,
        message: Object,
        idx: Number,
        m: {
            default: function m() {
                // vue uses this function to generate the prop. `this`==null Return our own function
                return function n() {
                    // Give our methods some props context before its function is called.
                    // This is only safe because the function on the methods object is called on
                    // the same js tick
                    methods.props = this;
                    return methods;
                };
            },
        },
    },
};
</script>

<style lang="less" scoped>

.kiwi-messagelist-message--modern {
    border-left: 7px solid transparent;
    display: flex;
    margin: 0 0 0 20px;
    margin-left: 0;
    transition: border-colour 0.2s, background-color 0.2s;
}

.kiwi-messagelist-modern-left {
    user-select: none;
    position: relative;
    display: flex;
    width: 50px;
}

.kiwi-messagelist-awaystatus {
    width: 10px;
    top: 4px;
    right: 2px;
    height: 10px;
    position: absolute;
}

.kiwi-messagelist-message--modern .kiwi-avatar {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorfirst {
    padding-top: 10px;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorrepeat {
    border-top: none;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorrepeat .kiwi-messagelist-modern-right {
    padding-top: 0;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message-topic {
    margin: 20px 20px 20px 20px;
    padding: 10px 20px;
    width: auto;
    box-sizing: border-box;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message-topic .kiwi-messagelist-modern-left {
    display: none;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorrepeat .kiwi-avatar {
    display: none;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorrepeat .kiwi-messagelist-top {
    display: none;
}

.kiwi-messagelist-message--modern .kiwi-messagelist-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    display: block;
    margin-left: 0;
    margin-bottom: 10px;
}

.kiwi-messagelist-message--modern .kiwi-messagelist-body a {
    word-break: break-all;
}

.kiwi-messagelist-message--modern .kiwi-messagelist-modern-right {
    margin-left: 5px;
    padding-top: 0;
    width: 100%;
    overflow: hidden;
}

.kiwi-messagelist-message--modern .kiwi-messagelist-top > div {
    margin-right: 10px;
    padding: 0;
    display: inline-block;
}

.kiwi-messagelist-message--modern .kiwi-messagelist-realname {
    cursor: pointer;
}

.kiwi-messagelist-message--modern .kiwi-messagelist-time {
    font-size: 0.8em;
    font-weight: 400;
    opacity: 0.6;
}

.kiwi-messagelist-message--modern .kiwi-messagelist-nick {
    padding: 0;
    margin-right: 10px;
}

.kiwi-messagelist-message-traffic .kiwi-messagelist-body {
    margin-bottom: 0;
}

.kiwi-messagelist-message-traffic .kiwi-messagelist-modern-left,
.kiwi-messagelist-message-traffic .kiwi-messagelist-top {
    display: none;
}

.kiwi-messagelist-message--modern.kiwi-messagelist-message-traffic {
    margin-right: 0;
    padding-left: 60px;
}

.kiwi-messagelist-message-error {
    padding: 10px 0;
    font-weight: 600;
    line-height: normal;
}

.kiwi-messagelist-message-error .kiwi-messagelist-top {
    display: none;
}

.kiwi-messagelist-message-error .kiwi-messagelist-body {
    margin-bottom: 0;
}

@media screen and (max-width: 769px) {
    .kiwi-messagelist-message--modern .kiwi-messagelist-modern-left {
        width: 10px;
    }

    .kiwi-messagelist-message--modern.kiwi-messagelist-message-privmsg .kiwi-messagelist-modern-left,
    .kiwi-messagelist-message-notice .kiwi-messagelist-modern-left {
        display: none;
    }

    .kiwi-messagelist-message--modern .kiwi-messagelist-modern-right {
        margin-left: 0;
    }

    .kiwi-messagelist-message--modern {
        margin: 0;
    }

    .kiwi-messagelist-message-action .kiwi-messagelist-modern-left {
        display: none;
    }

    .kiwi-messagelist-message--modern .kiwi-avatar {
        display: none;
    }

    .kiwi-messagelist-message--modern.kiwi-messagelist-message-traffic {
        padding-left: 10px;
    }

    .kiwi-messagelist-message--modern.kiwi-messagelist-message-topic {
        margin: 0 15px 20px 15px;
    }
}

</style>
